import { Button, Layout, Avatar, Dropdown, Space } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
// 7.引入 useDispatch 钩子函数， 用来调用 仓库中的方法
import { useDispatch } from 'react-redux';
// 8.引入 仓库中的方法
import { collapseMenu } from '../store/reducers/tab'
import { useNavigate } from 'react-router-dom';
const { Header } = Layout;


// 6. 函数式组件可以直接通过解构， 获取传递的自定义属性
export default function Aheader({ collapsed }) {
    // 9.创建 dispatch 方法
    const dispatch = useDispatch()

    const nagivate = useNavigate()

    function logout() {
        // 登出页面--清除 token
        localStorage.removeItem('admin-token')
        localStorage.removeItem('userRoute')
        localStorage.removeItem('userConfig')
        localStorage.removeItem('username')
        localStorage.removeItem('identify')

        nagivate('/login')
    }
    // 2.定义一个展开和收起的方法， 前往main页面，开始改变状态
    function setCollapsed() {
        // 9.调用 仓库中的方法， 改变仓库中值的状态，前往aside页面，根据改变的状态来收缩菜单
        dispatch(collapseMenu())
    }
    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" onClick={()=>{
                    nagivate('/home')
                }}>
                    个人中心
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a onClick={() => {
                    logout()
                    // 回调函数需要写调用， 直接用大括号编译不用写
                }} target="_blank" rel="noopener noreferrer">
                    登出
                </a>
            ),
            // icon: <SmileOutlined />,
            // disabled: true,
        },
    ];
    return (
        <Header style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
        }}>
            <Button
                type="text"
                // icon={<MenuFoldOutlined></MenuFoldOutlined>}
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                // 1.给按钮绑定一个点击事件
                onClick={() => setCollapsed()}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 32,
                    backgroundColor: '#fff'
                }}
            />
            <Dropdown
                menu={{ items }}
            >
                {/* <Avatar src={'../assets/head.png'}></Avatar>  错误 */}
                {/* <Avatar src={require('../assets/head.png')}></Avatar>  正确*/}
                <Avatar size={36} src={<img src={require('../assets/head.png')} />} />
            </Dropdown>
        </Header>
    )
}